<template>
  <div>
    <div class="container-head">
      <div class="header-info-left" @mouseleave="evtHeaderLeave()">
        <a class="icon-mi" href="https://www.mi.com/"></a>
        <p @mouseenter="evtHeaderEnter(item.type)"  v-for="item in allInfo.navs">{{
            item.name
          }} </p>
        <transition name="animate__animated animate__bounce" :appear="true" enter-active-class="animate__fadeIn"
                    leave-active-class="animate__fadeOut">
          <template v-if="currentInfo.length>0">
            <div class="drop-down-navs" v-show="headerStatus">
              <ul class="menus">
                <li v-for="item in currentInfo" class="product clear-fix">
                  <a :href="item.sourcePath">
                    <img :src="item.imgUrl" alt="" class="product-img"/>
                  </a>
                  <div class="product-name">{{ item.name }}</div>
                  <div class="product-price">
                    {{ item.price }}
                  </div>
                </li>
              </ul>
            </div>
          </template>
        </transition>
      </div>
      <div class="header-info-right">
        <transition name="animate__animated animate__bounce" :appear="true" enter-active-class="animate__bounceInLeft"
                    leave-active-class="animate__bounceOutRight">
          <div v-show="whetherShowHotSearch" class="hot-search">
            <p v-for="(item,index) in allInfo.hotItems" :key="index">{{ item }}</p>
          </div>
        </transition>
        <el-input @focus="whetherShowHotSearch=!whetherShowHotSearch" @blur="whetherShowHotSearch=!whetherShowHotSearch"
                  placeholder="请输入内容" v-model="usersSearch"
                  class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopHeader",
  data() {
    return {
      allInfo: {},
      usersSearch: '',
      whetherShowHotSearch: true,
      currentInfo: [],
      headerStatus: false,
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const {data: res} = await this.$http.get('topheader')
      this.allInfo = res
    },
    evtHeaderEnter(menuType) {
      if (menuType) {
        this.currentInfo = this.allInfo[menuType]
      } else {
        this.currentInfo = []
      }
      this.headerStatus = true
      clearTimeout(this.tids)
    },
    evtHeaderLeave() {
      let self = this
      this.tids = setTimeout(function () {
        self.headerStatus = false
      }, 300)
    }
  },
}
</script>

<style scoped lang="less">
.container-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  
  .header-info-left {
    display: flex;
    width: 870px;
    align-items: center;
    justify-content: space-around;
    
    .icon-mi {
      width: 55px;
      height: 55px;
      background: url('../../assets/img/icon-mi.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 20px;
    }
    
    p {
      transition: all .2s linear;
    }
    
    p:hover {
      color: #ED702F;
    }
    
    .drop-down-navs {
      position: absolute;
      left: 0;
      top: 120px;
      width: 100%;
      height: 230px;
      background: #fff;
      box-shadow: 0 1px 5px #ccc;
      z-index: 9999999;
      
      .menus {
        list-style: none;
        margin: 0;
        padding: 30px 0 0 150px;
        min-width: 1500px;
        
        .product {
          float: left;
          
          a {
            display: block;
            padding: 0 30px;
            border-right: 1px solid #ccc;
          }
          
          &:nth-last-child(1) {
            a {
              border-right: 0;
            }
          }
          
          .product-img {
            width: 160px;
            height: 110px;
          }
          
          .product-name {
            width: 100%;
            height: 16px;
            margin-top: 16px;
            font-size: 12px;
            text-align: center;
          }
          
          .product-price {
            width: 100%;
            height: 14px;
            margin-top: 10px;
            font-size: 10px;
            text-align: center;
            color: #ff6700;
          }
        }
      }
    }
  }
  
  .header-info-right {
    position: relative;
    width: 300px;
    
    .hot-search {
      display: flex;
      position: absolute;
      z-index: 10000000;
      top: 50%;
      left: 50%;
      transform: translate(-30%, -50%);
      
      p {
        font-size: 12px;
        margin: 0 5px;
        color: #ED702F;
      }
    }
  }
  
  /deep/ .el-input__inner:focus {
    border-color: #ED702F;
  }
  
}

</style>
